<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sfc后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../lib/layui-v2.5.4/layui.js"></script>
    <style>
      .layui-row div {
        padding: 10px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
      }

      .article-item {
        height: 95px;
        overflow: hidden;
      }

      .article-item div {
        height: 90px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
      }

      .content {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layui-row">
        <div class="layui-col-md1">id</div>
        <div class="layui-col-md2">標題</div>
        <div class="layui-col-md1">類別</div>
        <div class="layui-col-md6">內容</div>
        <div class="layui-col-md2">操作</div>
      </div>
      <div id="news-body"></div>
    </div>


    <script>
      window.onload = function() {

        var layer;
        layui.use('layer', function() {
          layer = layui.layer;
        });

        getArticle();

        /**
         * 查詢推薦文章
         */
        function getArticle() {
          $.ajax({
            url: 'http://localhost:3000/getHot',
            type: 'get',
            success(res) {
              let str = '';
              for (let i in res.data) {
                str +=
                  `<div class="layui-row article-item">
                    <div class="layui-col-md1">${i}</div>
                    <div class="layui-col-md2">${res.data[i].title}</div>
                    <div class="layui-col-md1">${res.data[i].category_title}</div>
                    <div class="layui-col-md6 content">${res.data[i].content.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</div>
                    <div class="layui-col-md2">
                      <div class="layui-btn-group">
                        <button type="button" class="unhot-btn layui-btn layui-btn-sm" data-id="${res.data[i].id}">取消推薦</button>
                      </div>
                    </div>
                  </div>`
              }
              $('#news-body').append(str);
            },
            fail(err) {
              layer.msg('獲取文章失敗')
            }
          });
        }

        $(document).on('click', '.unhot-btn', function() {
          let id = $(this).data('id');
          removeHot(id);
        });

        /**
         * 格式化datatime
         */
        function formatDate(datetime) {
          let date = (datetime.split('T'))[0];
          let time = ((datetime.split('T'))[1].split('.'))[0];
          return date + '<br>' + time;
        }

        <!-- 取消推薦 -->
        function removeHot(id) {
          $.ajax({
            url: 'http://localhost:3000/removeHot',
            type: 'post',
            data: {
              id: id
            },
            success(res) {
              if (res.code === 200) {
                layer.msg('取消成功');
                setTimeout(function() {
                  location.reload();
                }, 1000);
              } else {
                layer.msg('取消失败');
              }
            },
            fail() {
              layer.msg('取消失败');
            }
          })
        }
      };
    </script>
  </body>
</html>
